import axios from 'axios'
import React from 'react'
import { useLocation } from 'react-router-dom'
import { Button, Flex } from 'react-vant'
const Index: React.FC = () => {
  const { state } = useLocation()
  // 订单参数
  const title = state.title
  const price = state.price
  const id = new Date().getTime()

  // 请求订单接口， 获取支付链接
  const handlePay = () => {
    axios.get('/api/pay', {
      params: {
        id, title, price
      }
    }).then(resp => {
      console.log(resp.data)
      // 跳转支付链接
      globalThis.location.href = resp.data.data
    })
  }
  return (
    <div> 
      <Flex>
        <Flex.Item span={6}>订单号：</Flex.Item>
        <Flex.Item span={16}>{ id }</Flex.Item>
      </Flex>
      <Flex>
        <Flex.Item span={6}>标题：</Flex.Item>
        <Flex.Item span={16}>{ title }</Flex.Item>
      </Flex>
      <Flex>
        <Flex.Item span={6}>总价：</Flex.Item>
        <Flex.Item span={16}>{ price }</Flex.Item>
      </Flex>
      <Button type="primary" block onClick={() => handlePay()}>立即付款</Button>
    </div>
  )
}
export default Index

